<template>
  <div class="index-box" ref="index">
    <div class="backBox">
        <span class="back" @click="back"><i class="el-icon-back"></i>返回</span>
    </div>
    <div class="auditBox">
      <el-steps :active="active" class="steps" align-center  finish-status="success">
        <el-step :title="item.name" :description="item.time" v-for="item in stepList" ></el-step>
      </el-steps>
    </div>
    <div class="title">
      加盟申请资料信息
    </div>
    <div class="main d-flex">
        <div class="left-box">
          <el-form id="userDialog"  label-position="right">
            <el-form-item label="加盟编号:"  label-width="165px">
              {{user.code}}
            </el-form-item>
            <el-form-item label="姓名:"  label-width="165px">
              {{user.name}}
            </el-form-item>
            <el-form-item label="手机号:"  label-width="165px">
              {{user.telephone}}
            </el-form-item>
            <el-form-item label="身份证号:" prop="idCard" label-width="165px">
              {{user.idcardNumber}}
            </el-form-item>
            <el-form-item label="推荐人:" prop="phone" label-width="165px">
              {{user.referrerFullname}}
            </el-form-item>
            <el-form-item label="推荐人手机号:" prop="phone" label-width="165px">
              {{user.referrerTelephone}}
            </el-form-item>
            <el-form-item label="地址:" prop="province" label-width="165px" class="address-box">
                 {{user.address}}
            </el-form-item>
            <!-- <el-form-item label="详细地址:" prop="address" label-width="165px">
                {{user.address}}
            </el-form-item> -->
            <el-form-item label="开户银行:" prop="depositBank" label-width="165px">
               {{user.bankName}}
            </el-form-item>
            <el-form-item label="银行账号:" prop="depositBank" label-width="165px">
               {{user.bankNumber}}
            </el-form-item>
            <el-form-item label="加盟等级:" prop="level" label-width="165px">
             {{levelData.name}}({{levelData.union_fee}}万加盟费)
            </el-form-item>
          </el-form>
        </div>
        <div class="right-box">
          <el-form   label-position="right" style="background:#F1F5F2;padding:25px 0;">
            <el-form-item label="身份证正面图:" prop="money" label-width="165px">
              <el-image :src="user.idFrontPic | toImgFull" fit="fill" v-image-preview style="width:100px;cursor: pointer;"></el-image>
            </el-form-item>
            <el-form-item label="身份证反面图:" prop="money" label-width="165px">
              <el-image :src="user.idBackPic | toImgFull" fit="fill" v-image-preview style="width:100px;cursor: pointer;"></el-image>
            </el-form-item>
            <el-form-item label="上传凭证:" prop="voucher" label-width="165px" class="voucherBox">
                <el-image :src="user.transferVoucherPic | toImgFull" fit="fill" v-image-preview style="width:100px;cursor: pointer;"></el-image>
               <!-- <span style="color:#61997A;cursor: pointer;margin-left:10px">查看凭证</span> -->
            </el-form-item>
          </el-form>
        </div>
    </div>

    <div class="active d-flex justify-center" style="">

      <el-button type="primary" @click="handleAudit(user,'1')"  v-if='user.status=="1" && user.examineStep=="0"' v-has="'audit:joinCompanyAudit:oneAudit'">初审</el-button>
      <el-button type="primary" @click="handleAudit(user,'2')" v-if='user.status=="1" && user.examineStep=="1"' v-has="'audit:joinCompanyAudit:twoAudit'">复审</el-button>
    </div>

    <!-- /*加盟审核*/	 -->
    <el-dialog title="加盟审核" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible" @close="auditVisible = false">
      <el-form id="userDialog" :model="audit" label-position="right" :rules="rules" ref="audit">
        <el-form-item label="初审人(工号):" prop="remark" label-width="125px" v-if="audit.type=='2'">
          {{user.examines[0].employeName}}({{user.examines[0].employeCode}})
        </el-form-item>
        <el-form-item label="初审时间:" prop="remark" label-width="125px" v-if="audit.type=='2'">
         {{parseTime(user.examines[0].insertDate)}}
        </el-form-item>
        <el-form-item label="初审备注:" prop="remark" label-width="125px" v-if="audit.type=='2'">
          {{user.remarks}}
        </el-form-item>
        <el-form-item label="审核:" prop="status" label-width="125px"  style="width:100%" >
             <el-radio-group v-model="audit.status">
              <el-radio  label="1">通过</el-radio>
              <el-radio  label="2">不通过</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注:" prop="remark" label-width="125px" >
          <el-input v-model="audit.remark" type="textarea" autocomplete="off" :rows="4" placeholder="请填写审核备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitUser('audit')" size="small" :loading="userLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import { getUnion, unionAudit, } from '@/api/getData';
  import { regionData,CodeToText } from 'element-china-area-data';
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        userLoading:false,
        active:0,
        user:{},
        levelData:{},

        stepList:[],
        stepStatus:'',

        auditVisible:false,
        audit: {
          customerUnionId: '',
          status:'',
          type :'',//1：初审；2：复审
          remark:''
        },
        rules: {
          status: [{required: true, message: '请选择是否审核通过',trigger: 'blur'}]
        },
      }
    },
    mounted() {
      this.dataInfo();
    },
    methods: {
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getUnion({customerUnionId:this.$route.query.customerUnionId});
          if (result.code == 200) {
            let data = result.data;
            this.levelData = data.levelData?JSON.parse(data.levelData):{}
            this.user = data;
            let applyTime = this.parseTime(data.insertDate)
            let topList = [{name:'申请时间',time:applyTime}];
            if(data.examines.length){
              for(let i=0;i<data.examines.length;i++){
                let time = this.parseTime(data.examines[i].insertDate);
                let name = data.examines[i].employeName+'('+data.examines[i].employeCode+')'+data.examines[i].typeName
                topList.push({name:name,time:time})
              }
            }
            topList.push({name:data.status=='1'?'待审核':(data.status=='2'?'成功加盟':'已驳回'),time:data.remarks});
            this.active = (data.status=='2'?topList.length:topList.length-1);
            this.stepStatus = (data.status=='1'?'wait':(data.status=='2'?'success':'error'))
            this.stepList = topList;
            console.log(topList);
            
            //更新右上角未读消息个数
            this.$EventBus.$emit('getNoticeCountBus')
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
        }
      },
      handleAudit(row,type){/*审核*/
        this.audit.customerUnionId = row.customerUnionId;
        this.audit.status = '';
        this.audit.remark = '';
        this.audit.type = type;
        this.auditVisible = true;
      },
      submitUser(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.userLoading = true;
            unionAudit(this.audit).then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.auditVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.msg);
              }
              this.userLoading = false;
            });
          }
        })
      },
      back(){
        this.$router.go(-1);
      },

    }
  }
</script>

<style scoped lang="scss">
  .voucherBox /deep/ .el-form-item__content{
    display:flex;
  }
  .auditBox .jobNumber{
    text-align: center;
    color:#606266;
  }
  .auditBox .steps{
    width:60%;
    margin:0 auto;
    margin-top:20px;
  }
  .index-box{
    height: 100%;
    overflow-y: auto;
  }
  .index-box /deep/ .el-form-item{
    margin-bottom:10px;
  }
  .title{
    font-size:15px;
    color: #606266;
    font-weight:700;
    margin:30px 0;
  }
  .address-box  /deep/ .el-form-item__content{
    display: flex;
  }

    .index-box /deep/ .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .index-box{
      .left-box{
        width:50%;
        padding:0 50px;
      }
      .right-box{
        width:50%;
        padding:0 50px;
      }
    }
</style>
